<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>检查单据填写</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.2/css/layui.css"/>
</head>
<body>
<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">订单号码</label>
    <div class="layui-input-inline">
      <input type="text" id="orderId" name="orderId" required readonly lay-verify="required" autocomplete="off" class="layui-input layui-hide">
      <input type="text" id="orderNumber" name="orderNumber" required readonly lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">系统自动带出</div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">赔付金额(元)</label>
    <div class="layui-input-inline">
      <input type="number" name="money" required  lay-verify="required|money" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">存在问题</label>
    <div class="layui-input-inline">
      <input type="text" name="question" required lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">如果没有请填无</div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">问题描述</label>
    <div class="layui-input-inline">
      <textarea name="remake" placeholder="问题描述" autocomplete="off" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <button style="text-align: center" class="layui-btn" lay-submit autocomplete="off" lay-filter="insert">立即提交
      </button>
    </div>
  </div>
</form>
<script src="https://www.layuicdn.com/layui-v2.6.2/layui.js"></script>
<script>
  layui.use(['layer', 'form'], function () {
    const layer = layui.layer;
    const form = layui.form;
    const $ = layui.$;
    form.on('submit(insert)', function (data) {
      const params = JSON.stringify(data.field);
      // 添加检查单
      $.ajax({
        'contentType': 'application/json;charset=utf-8',
        'data': params,
        'url': '/api/check',
        'type': 'post',
        success: function (data) {
          if (data.code && data.code === 200) {
            layer.msg("处理成功");
            setTimeout(() => {
              layer.close(layer.index);
              window.parent.location.reload();
            }, 1000)
          } else {
            layer.msg(data.message);
          }
        }
      });
      return false;
    })
    
    //表单校验
    form.verify({
      money: function (value, item) {//value：表单的值、item：表单的DOM对象
        if (!value.includes('.')) {
          // 加上小数后缀
          value = value + ".00";
        }
        const reg = new RegExp('^(([1-9][0-9]{0,14})|([0])|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$');
        if (!reg.test(value)) {
          return '请输入合法的金额';
        }
      }
    });
  });
</script>
</body>
</html>
